<template>
  <transition>
    <div class="app-insurance-plan">
    <div class="app-main">
      <ul class="module-step">
        <li class="item">
          <span class="count">1</span>
          <span class="title">车辆信息</span>
        </li>
        <li class="item active">
          <span class="count">2</span>
          <span class="title">投保方案</span>
        </li>
        <li class="item">
          <span class="count">3</span>
          <span class="title">报价信息</span>
        </li>
        <li class="item">
          <span class="count">4</span>
          <span class="title">申请核保</span>
        </li>
      </ul>
      <div class="module-info">
        <div class="info-title">请勾选想要购买的主险</div>
        <ul class="info-content">
          <li class="item" v-for="item in listFirst">
            {{item.isCheck}}
          <div class="item-checkbox">
               <span class="radio_btn">
                  <input class="check-position" name="radio-first" type="radio" :value="item.id" v-model="post.firstValue" :id="item.id">
                  <span></span>
              </span>
          </div>
            <label class="item-title" :for="item.id">
              {{item.title}}
            </label>
          <div class="item-other" v-if="item.value" @click="handleOpenSelectType(item,'first')">
            {{item.value}}<span class="iconfont icon--xiangyou"></span>
          </div>
          </li>
          </ul>
      </div>
      <div class="module-info">
        <div class="info-title">请勾选想要购买的附加险</div>
        <ul class="info-content">
          <li class="item" v-for="item in listSecond">
            <div class="item-checkbox">
               <span class="radio_btn">
                  <input class="check-position" name="radio-second" type="radio" :value="item.id" v-model="post.secondValue" :id="item.id">
                  <span></span>
              </span>
            </div>
            <label class="item-title" :for="item.id">
              {{item.title}}
            </label>
            <div class="item-other" v-if="item.value" @click="handleOpenSelectType(item,'second')">
              {{item.value}}<span class="iconfont icon--xiangyou"></span>
            </div>
          </li>
        </ul>
      </div>
      <div class="module-info">
        <div class="info-title">不计免赔</div>
        <ul class="info-content">
          <li class="item" v-for="item in listThird">
            <div class="item-checkbox">
               <span class="radio_btn">
                  <input class="check-position" name="radio-third" type="radio" :value="item.id" v-model="post.thirdValue" :id="item.id">
                  <span></span>
              </span>
            </div>
            <label class="item-title" :for="item.id">
              {{item.title}}
            </label>
            <div class="item-other" v-if="item.value" @click="handleOpenSelectType(item,'third')">
              {{item.value}}<span class="iconfont icon--xiangyou"></span>
            </div>
          </li>
        </ul>
      </div>
      <mt-popup
        v-model="popupSelectType"
        position="bottom" class="my-popup">
        <div class="popup-tips">{{popupSelectTypeTips}}</div>
        <div class="media-list">

          <mt-cell v-for="(item,index) in popupSelectList" :title="item.title" is-link @click.native="handleSureSelectType(item)">
          </mt-cell>
        </div>
      </mt-popup>
      <div class="button-content-bottom">
      <mt-button type="primary" @click.native="handleToNext">获取报价</mt-button>
      </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { Swipe, SwipeItem} from 'mint-ui';
export default {
  data () {
    return {
      post:{
        firstValue:'',
        secondValue:'',
        thirdValue:'',
      },
      listFirst:[
        {
          title:'机动车辆损失险',
          id:'first1',
        },{
          title:'第三者责任险',
          id:'first2',
          value:'50万',
        },{
          title:'车上人员责任险-司机',
          id:'first3',
          value:'5万',
        },{
          title:'车上人员责任险-乘客',
          id:'first4',
          value:'5万/人',
        },{
          title:'盗抢险',
          id:'first5',
        },
      ],
      listSecond:[
        {
          title:'玻璃单独破碎险',
          id:'second1',
          value:'国产玻璃',
        },{
        title:'车身划痕险',
        id:'second2',
        value:'5千',
      },{
          title:'发动机特别损失险',
          id:'second3',
        },{
          title:'自燃损失险',
          id:'second4',
        },{
          title:'车损无法找到第三方特约',
          id:'second4',
        },
      ],
      listThird:[
        {
          title:'机动车辆损失不计免赔',
          id:'third1',
        },{
          title:'第三责任险不计免赔',
          id:'third2',
        },{
          title:'车上人员责任险不计免赔',
          id:'third3',
        },{
          title:'车身划痕不计免赔',
          id:'third4',
        },{
          title:'盗抢险不计免赔',
          id:'third5',
        },
      ],
      selectTypeIndex:'',
      selectTypeId:'',
      popupSelectType:false,
      popupSelectTypeTips:'',
      popupSelectList:[],
    }
  },
  computed:{
  },
  watch:{
  },
  mounted(){

  },
  methods:{
    handleChange(item, index){
      this.currentType = index;
    },
    handleOpenSelectType(item,index){
      this.popupSelectType=true;
      this.selectTypeIndex=index;
      this.selectTypeId=item.id;
      this.popupSelectTypeTips=item.title
      if(item.id=='first2'){
        this.popupSelectList=[
          {
            title:'50万'
          },{
            title:'100万'
          },{
            title:'150万'
          }
        ]
      }else if(item.id=='first3'){
        this.popupSelectList=[
          {
            title:'5万'
          },{
            title:'10万'
          },{
            title:'15万'
          }
        ]

      }else if(item.id=='first4'){
        this.popupSelectList=[
          {
            title:'5万/人'
          },{
            title:'10万/人'
          },{
            title:'15万/人'
          }
        ]

      }else if(item.id=='second1'){
        this.popupSelectList=[
          {
            title:'国产玻璃'
          },{
            title:'原厂玻璃'
          }
        ]

      }else if(item.id=='second2'){
        this.popupSelectList=[
          {
            title:'5千'
          },{
            title:'1万'
          }
        ]

      }
    },
    handleSureSelectType(item){
      console.log(this.selectTypeIndex)
      if(this.selectTypeIndex=='first'){
        for(var i=0;i<this.listFirst.length;i++){
          if(this.listFirst[i].id==this.selectTypeId){
            this.listFirst[i].value=item.title;
          }
        }
      }else if(this.selectTypeIndex=='second'){
        for(var i=0;i<this.listSecond.length;i++){
          if(this.listSecond[i].id==this.selectTypeId){
            this.listSecond[i].value=item.title;
          }
        }
      }
      this.popupSelectType=false;
    },
    handleToNext(){

      this.$router.push({path:'/insurance-price-info'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-insurance-plan .app-main{
    padding:0 0 62px;
  }
  .app-insurance-plan .module-step{
    background: #fff;
    display: flex;
    padding:20px 0;
  }
  .app-insurance-plan .module-step .item{
    position: relative;
    width: 25%;
    text-align: center;
  }
  .app-insurance-plan .module-step .item:before{
    background: #007EE5;
    position: absolute;
    top:8px;
    left: 0;
    content: '';
    width: 50%;
    height: 1px;
  }
  .app-insurance-plan .module-step .item:after{
    background: #007EE5;
    position: absolute;
    top:8px;
    content: '';
    width: 50%;
    height: 1px;
  }
  .app-insurance-plan .module-step .item:first-child:before,.app-insurance-plan .module-step .item:last-child:after{
    background: #fff;
  }
  .app-insurance-plan .module-step .item.active .count{
    background: #007EE5;
    color: #fff;
  }
  .app-insurance-plan .module-step .count{
    background: #fff;
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    border-radius: 50%;
    border: 1px solid #007EE5;
    color: #007EE5;
    font-size: 13px;
  }
  .app-insurance-plan .module-step .title{
    display: block;
    padding:4px 0 0;
    color: #007EE5;
  }
  .app-insurance-plan .button-content-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
  }
  .app-insurance-plan .button-content-bottom .mint-button{
    display: flex;
    flex: 1;
    border-radius: 0;
    justify-content: center;
    font-size: 16px;
    box-shadow: none;
    height: 50px;

  }

  .app-insurance-plan .radio_btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }

  .app-insurance-plan .radio_btn input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0;
    margin: 0;
  }

  .app-insurance-plan .radio_btn span {
    background: #fff;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
  }

  .app-insurance-plan .radio_btn input[type="radio"] + span {
    background: #fff;

  }

  .app-insurance-plan .radio_btn input[type="radio"]:checked + span {
    border: 1px solid #26a2ff;
    background: #26a2ff;
  }

  .app-insurance-plan .radio_btn span:after {
    border: 2px solid transparent;
    border-left: 0;
    border-top: 0;
    content: " ";
    top: 3px;
    left: 6px;
    position: absolute;
    width: 4px;
    height: 8px;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
  }

  .app-insurance-plan .radio_btn input[type="radio"]:checked + span:after {
    border-color: #fff;
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  .app-insurance-plan .module-info .info-title{
    padding:12px 16px;
    color: #333;
    font-size: 13px;
  }
  .app-insurance-plan .module-info .info-content{
    background: #fff;
    padding:0 14px;
    color: #333;
    font-size: 15px;
  }
  .app-insurance-plan .module-info .info-content .item{
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom:1px solid #f5f5f5;
  }
  .app-insurance-plan .module-info .info-content .item-title{
    width:64%;
    padding:0 10px;
    color: #888;
    font-size: 15px;
  }
  .app-insurance-plan .module-info .info-content .item-other{
    width: 30%;
    text-align: right;
    margin-left: auto;
    color: #888;
    font-size: 15px;
  }
  .app-insurance-plan .my-popup{
    width: 100%;
    height:50%;
    overflow: auto;
  }
  .app-insurance-plan .my-popup .popup-tips{
    background: #f5f5f5;
    padding:16px 12px 12px;
    font-size: 16px;
  }
</style>
